<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D2C Web UI - Docker to Compose</title>
    <link rel="icon" href="{{ url_for('static', filename='images/logo-icon.svg') }}" type="image/svg+xml">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
    <link rel="mask-icon" href="{{ url_for('static', filename='images/safari-pinned-tab.svg') }}" color="#5bbad5">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航栏 -->
        <header class="header">
            <div class="header-content">
                <div class="header-left">
                    <button class="btn btn-outline-light btn-sm" id="aboutMeBtn" title="关于我">
                        <i class="fas fa-info-circle"></i>
                        关于我
                    </button>
                </div>
                <div class="header-center">
                    <div class="logo">
                        <img src="{{ url_for('static', filename='images/logo-main.svg') }}" alt="D2C Logo" style="height: 32px; margin-right: 10px;">
                        <span>D2C Web UI</span>
                    </div>
                </div>
                <div class="header-actions">
                    <button class="btn btn-primary" id="schedulerStatusBtn">
                        <i class="fas fa-clock"></i>
                        定时任务
                    </button>
                    <button class="btn btn-secondary" id="settingsBtn">
                        <i class="fas fa-cog"></i>
                        设置
                    </button>
                    <button class="btn btn-primary" id="refreshBtn">
                        <i class="fas fa-sync-alt"></i>
                        刷新容器
                    </button>
                    <button class="btn btn-success" id="generateAllBtn">
                        <i class="fas fa-file-code"></i>
                        生成全量Compose
                    </button>
                </div>
            </div>
        </header>



        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 左侧容器列表 -->
            <aside class="sidebar">
                <div class="sidebar-header">
                    <div class="header-left">
                        <h3>
                            <i class="fas fa-cubes"></i>
                            容器列表
                        </h3>
                        <div class="selection-info">
                            已选择: <span id="selectedCount">0</span> 个容器
                        </div>
                    </div>
                    <div class="header-right">
                        <div class="expand-controls">
                            <button class="btn btn-sm expand-btn" id="expandAllBtn" title="展开">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                            <button class="btn btn-sm collapse-btn" id="collapseAllBtn" title="收缩">
                                <i class="fas fa-chevron-up"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="container-groups" id="containerGroups">
                    <div class="loading">
                        <i class="fas fa-spinner fa-spin"></i>
                        加载中...
                    </div>
                </div>
            </aside>

            <!-- 中间文件列表 -->
            <aside class="file-list-sidebar">
                <div class="sidebar-header">
                    <h3>
                        <i class="fas fa-folder-open"></i>
                        文件
                    </h3>
                    <button class="btn btn-primary" id="refreshFilesBtn">
                        <i class="fas fa-sync-alt"></i>
                        刷新
                    </button>
                </div>
                
                <div class="file-list" id="fileList">
                    <div class="loading">
                        <i class="fas fa-spinner fa-spin"></i>
                        加载中...
                    </div>
                </div>
            </aside>

            <!-- 右侧编辑器区域 -->
            <section class="editor-section">
                <div class="editor-header">
                    <div class="editor-title">
                        <h3>
                            <i class="fas fa-file-code"></i>
                            编辑器
                        </h3>
                    </div>
                    <div class="editor-actions">
                        <input type="text" class="filename-input" id="filenameInput" placeholder="输入文件名..." value="compose.yaml">
                        <button class="btn btn-success" id="generateComposeBtn">
                            <i class="fas fa-magic"></i> 合并
                        </button>
                        <button class="btn btn-primary" id="saveBtn">
                            <i class="fas fa-save"></i> 保存
                        </button>
                        <button class="btn btn-success" id="copyBtn">
                            <i class="fas fa-copy"></i> 复制
                        </button>
                    </div>
                </div>
                
                <div class="editor-container">
                    <div class="editor-placeholder" id="editorPlaceholder">
                        <div class="placeholder-content">
                            <i class="fas fa-arrow-left"></i>
                            <h4>选择容器生成 Compose 文件</h4>
                            <p>从左侧选择一个或多个容器，然后点击"生成 Compose"按钮</p>
                        </div>
                    </div>
                    <textarea id="yamlEditor" class="yaml-editor" placeholder="Compose 内容将在这里显示..."></textarea>
                </div>
            </section>
        </main>
    </div>

    <!-- 设置弹窗 -->
    <div class="modal fade" id="settingsModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-cog"></i> 环境变量设置
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="settingsForm">
                        <div class="mb-3">
                            <label for="nasInput" class="form-label">NAS系统类型</label>
                            <select class="form-select" id="nasInput">
                                <option value="debian">Debian</option>
                                <option value="zos">Zos</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="networkInput" class="form-label">网络模式</label>
                            <select class="form-select" id="networkInput">
                                <option value="true">显示 (true)</option>
                                <option value="false">隐藏 (false)</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="tzInput" class="form-label">时区</label>
                            <select class="form-select" id="tzInput">
                                <option value="Asia/Shanghai">Asia/Shanghai (北京时间)</option>
                                <option value="UTC">UTC (协调世界时)</option>
                                <option value="America/New_York">America/New_York (纽约时间)</option>
                                <option value="Europe/London">Europe/London (伦敦时间)</option>
                                <option value="Asia/Tokyo">Asia/Tokyo (东京时间)</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveSettingsBtn">保存设置</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 任务状态弹窗 -->
    <div class="modal fade" id="schedulerStatusModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-clock"></i> 任务计划状态
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- 任务状态信息 -->
                    <div class="card mb-2">
                        <div class="card-body p-3">
                            <div class="row g-3">
                                <!-- 左侧：状态和操作按钮 -->
                                <div class="col-md-5">
                                    <div class="mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="fw-bold text-muted me-2">状态:</span>
                                            <span id="schedulerCurrentStatus" class="badge bg-success">检查中...</span>
                                        </div>
                                    </div>
                                    <div class="d-grid gap-2">
                                        <button class="btn fw-bold" id="quickStartBtn" style="background: linear-gradient(135deg, #28a745, #20c997); color: white; border: none; padding: 12px 20px; font-size: 14px; min-height: 45px;">
                                            <i class="fas fa-play me-2"></i>启动任务
                                        </button>
                                        <button class="btn fw-bold" id="quickStopBtn" style="background: linear-gradient(135deg, #dc3545, #fd7e14); color: white; border: none; padding: 12px 20px; font-size: 14px; min-height: 45px;">
                                            <i class="fas fa-stop me-2"></i>停止任务
                                        </button>
                                        <button class="btn fw-bold" id="quickRunOnceBtn" style="background: linear-gradient(135deg, #007bff, #6f42c1); color: white; border: none; padding: 12px 20px; font-size: 14px; min-height: 45px;">
                                            <i class="fas fa-bolt me-2"></i>立即执行
                                        </button>
                                    </div>
                                </div>
                                <!-- 右侧：CRON信息和执行时间 -->
                                <div class="col-md-7">
                                    <div class="row g-2">
                                        <div class="col-12">
                                            <div class="bg-light rounded p-2">
                                                <div class="d-flex justify-content-between align-items-center mb-1">
                                                    <span class="fw-bold text-muted small">CRON表达式:</span>
                                                    <span id="schedulerCron" class="badge bg-secondary font-monospace">*/5 * * * *</span>
                                                </div>
                                                <div class="input-group input-group-sm">
                                                    <input type="text" id="schedulerCronInput" class="form-control" placeholder="*/5 * * * *" style="font-family: monospace; font-size: 12px;">
                                                    <button type="button" id="updateCronBtn" class="btn btn-outline-primary btn-sm">更新</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-center p-2 bg-info bg-opacity-10 rounded">
                                                <div class="small text-muted mb-1">下次执行</div>
                                                <div id="schedulerNextRun" class="fw-bold text-info small">计算中...</div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-center p-2 bg-warning bg-opacity-10 rounded">
                                                <div class="small text-muted mb-1">最后执行</div>
                                                <div id="schedulerLastRun" class="fw-bold text-warning small">无记录</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 日志输出 -->
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                <i class="fas fa-file-alt"></i> 执行日志
                            </h6>
                            <div>
                                <button class="btn btn-sm btn-outline-secondary" id="refreshLogsBtn">
                                    <i class="fas fa-sync-alt"></i> 刷新
                                </button>
                                <button class="btn btn-sm btn-outline-danger" id="clearLogsBtn">
                                    <i class="fas fa-trash"></i> 清空
                                </button>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="log-container" id="logContainer">
                                <div class="log-placeholder">
                                    <i class="fas fa-file-alt"></i>
                                    <p>暂无日志信息</p>
                                    <small class="text-muted">执行任务后将显示相关日志</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="autoRefreshToggle">
                        <i class="fas fa-sync-alt"></i> 开启自动刷新
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 关于我弹窗 -->
    <div class="modal fade" id="aboutMeModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-info-circle"></i> 关于 D2C Web UI
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- 项目标题和版本号 -->
                    <div class="text-center mb-4">
                        <div class="d-flex align-items-center justify-content-center mb-3">
                            <img src="{{ url_for('static', filename='images/logo-main.svg') }}" alt="D2C Logo" style="height: 48px; margin-right: 15px;">
                            <h1 class="display-4 fw-bold mb-0 text-primary">D2C Web UI</h1>
                        </div>
                        <div class="d-flex align-items-center justify-content-center">
                            <span class="h4 me-3 text-secondary">Docker to Compose 转换工具</span>
                            <span class="badge bg-primary px-3 py-2 fs-6">v1.1.4</span>
                        </div>
                    </div>

                    <!-- 系统介绍 -->
                    <div class="text-center mb-4">
                        <div class="row justify-content-center">
                            <div class="col-md-10">
                                <p class="lead mb-4 text-muted">D2C Web UI 是一个强大的 Docker 容器管理工具，专门用于将运行中的 Docker 容器转换为 Docker Compose 配置文件。</p>
                                
                                <!-- 主要功能 -->
                                <div class="row g-4 mb-4">
                                    <div class="col-md-6">
                                        <div class="feature-item p-3 border rounded">
                                            <i class="fas fa-cubes fa-2x mb-2 text-primary"></i>
                                            <h6>自动扫描运行中的 Docker 容器</h6>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="feature-item p-3 border rounded">
                                            <i class="fas fa-file-code fa-2x mb-2 text-info"></i>
                                            <h6>智能生成 Docker Compose 配置</h6>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="feature-item p-3 border rounded">
                                            <i class="fas fa-layer-group fa-2x mb-2 text-warning"></i>
                                            <h6>支持批量容器处理和合并</h6>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="feature-item p-3 border rounded">
                                            <i class="fas fa-clock fa-2x mb-2 text-danger"></i>
                                            <h6>定时任务自动化管理</h6>
                                        </div>
                                    </div>
                                </div>

                                <!-- 技术栈 -->
                                <div class="row g-3 justify-content-center mb-4">
                                    <div class="col-auto">
                                        <span class="badge bg-primary px-3 py-2">Python Flask</span>
                                    </div>
                                    <div class="col-auto">
                                        <span class="badge bg-info px-3 py-2">Docker API</span>
                                    </div>
                                    <div class="col-auto">
                                        <span class="badge bg-warning text-dark px-3 py-2">Bootstrap 5</span>
                                    </div>
                                    <div class="col-auto">
                                        <span class="badge bg-danger px-3 py-2">JavaScript</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 项目地址和作者介绍 -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h6 class="card-title">🌟 开源项目</h6>
                                    <a href="https://github.com/coracoo/docker2compose" target="_blank" class="text-decoration-none">
                                        <i class="fab fa-github me-2"></i>https://github.com/coracoo/docker2compose
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h6 class="card-title">📧 技术支持</h6>
                                    <div class="text-muted">
                                        <i class="fas fa-user-cog me-2"></i>系统管理员
                                    </div>
                                    <div class="small text-muted">
                                        专注于容器化技术和自动化运维
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 感谢信息 -->
                    <div class="text-center mb-4">
                        <div class="small text-muted">
                            <i class="fas fa-star me-1"></i> 开源项目 | 
                            <i class="fas fa-code-branch me-1"></i> 技术支持 | 
                            <i class="fas fa-tools me-1"></i> 持续更新 |
                            <span class="ms-2">感谢使用 D2C Web UI，让容器管理更简单！</span>
                        </div>
                    </div>

                    <!-- 底部图片 -->
                    <div class="text-center">
                        <img src="{{ url_for('static', filename='images/about_me.png') }}" alt="关于我" class="img-fluid" style="max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="window.open('https://github.com/coracoo/docker2compose', '_blank')">
                        <i class="fab fa-github"></i> 查看仓库
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 通知组件 -->
    <div class="notification" id="notification">
        <div class="notification-content">
            <span class="notification-message"></span>
            <button class="notification-close">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>

    <!-- 加载遮罩 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner">
            <i class="fas fa-spinner fa-spin"></i>
            <span>处理中...</span>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
    <script>
        // 初始化应用
        const app = new D2CWebUI();
    </script>
</body>
</html>
